<template>
  <view class="listAgo_container">
    <view class="title">
      <view>可开票订单</view>
      <view>
        <label @click="radio = true">
          <checkbox class="checkbox" :checked="radio" /> 普票
        </label>
        <label @click="radio = false" style="margin-left: 47.22rpx">
          <checkbox class="checkbox" :checked="!radio" /> 专票
        </label>
      </view>
    </view>

    <view class="list">
      <view v-for="(item, index) in list" :key="index" class="item">
        <label @click="clickItemChecked(item)">
          <checkbox class="checkbox" :checked="item.checked" />
        </label>
        <view class="itemInfo">
          <text>订单编号：{{ item.sn }}</text>
          <text>订单金额：￥{{ item.flowPrice }}</text>
        </view>
        <img :src="staticUrl() + '/personalCenter/right.png'" class="right" />
      </view>
    </view>

    <view class="bottom">
      <view class="tips">
        已选择<text>{{ orderNum }}</text>个订单，共<text>{{ total.toFixed(2) }}</text>元（不包含运费）</view>
      <view class="button">
        <label @click="clickSelectAll">
          <checkbox class="checkbox" :checked="selectAll" /> 全选
        </label>
        <view class="nextStep" @click="nextStep">下一步</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getIssueInvoicesList } from '@/api/invoice'

export default {
  data () {
    return {
      pageNumber: 1,
      pageSize: 30,
      pages: 0,
      radio: true,
      list: [],
      selectAll: false,
      orderNum: 0,
      total: 0
    }
  },
  // 监听触底
  onReachBottom () {
    this.pageNumber++
    if (this.pages >= this.pageNumber) {
      this.getList()
    }
  },
  onShow () {
    this.list = []
    this.getList()
  },
  methods: {
    clickItemChecked (item) {
      item.checked = !item.checked
      this.orderNum = 0
      this.total = 0
      this.list.forEach(i => {
        if (i.checked) {
          this.total += i.flowPrice
          this.orderNum++
        }
      })
    },
    getList () {
      getIssueInvoicesList({ pageNumber: this.pageNumber, pageSize: this.pageSize }).then(res => {
        if (res.code === 200) {
          this.list.push(...res.data.records)
          this.list.forEach(i => {
            this.$set(i, 'checked', false)
          })
          this.pages = res.data.pages
        }
      })
    },
    nextStep () {
      let receiptPrice = 0
      let orderSns = []
      this.list.forEach(i => {
        if (i.checked) {
          receiptPrice += i.flowPrice
          orderSns.push(i.sn)
        }
      })
      if (!orderSns.length) {
        uni.showToast({ icon: 'none', title: '请选中要开具发票的订单', mask: true })
        return
      }
      let radio = this.radio ? 'ORDINARY' : 'VAT'
      uni.navigateTo({
        url: `/subpackage/invoice/invoicingInfo?radio=${radio}&&receiptPrice=${receiptPrice.toFixed(
          2
        )}&orderSns=${JSON.stringify(orderSns)}`
      })
    },
    clickSelectAll () {
      this.selectAll = !this.selectAll
      if (this.selectAll) {
        this.list.forEach(i => {
          i.checked = true
        })
      } else {
        this.list.forEach(i => {
          i.checked = false
        })
      }

      this.orderNum = 0
      this.total = 0
      this.list.forEach(i => {
        if (i.checked) {
          this.total += i.flowPrice
          this.orderNum++
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.listAgo_container {
  min-height: 100vh;
  background: #f9f9f9;

  .title {
    box-sizing: border-box;
    width: 750rpx;
    height: 92rpx;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 29.86rpx;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .list {
    padding-bottom: 200rpx;

    .item {
      height: 153rpx;
      background: #ffffff;
      margin-top: 20.83rpx;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      position: relative;

      .checkbox {
        margin-left: 29.86rpx;
        margin-right: 24.31rpx;
      }

      .itemInfo {
        display: flex;
        flex-flow: column nowrap;

        text:nth-child(1) {
          font-size: 29rpx;
        }

        text:nth-child(2) {
          font-size: 25rpx;
          color: #8d8d8d;
        }
      }

      .right {
        position: absolute;
        width: 14rpx;
        height: 21rpx;
        right: 29.86rpx;
      }
    }
  }

  .bottom {
    width: 100%;
    height: 178rpx;
    background: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;

    .tips {
      line-height: 69rpx;
      font-size: 21rpx;
      border-bottom: 2rpx solid #f9f9f9;
      margin-left: 29.86rpx;

      text:nth-child(1) {
        color: #2871fc;
      }

      text:nth-child(2) {
        color: #ef231b;
      }
    }

    .button {
      width: 100%;
      height: 104rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 29rpx;

      .nextStep {
        width: 215rpx;
        height: 80rpx;
        background: #2871fc;
        border-radius: 40rpx;
        color: #ffffff;
        font-size: 29rpx;
        line-height: 80rpx;
        text-align: center;
        margin-right: 25.69rpx;
      }

      .checkbox {
        margin-left: 29.86rpx;
        margin-right: 24.31rpx;
      }
    }
  }
}
</style>
